<template>
    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="title" label="班车名称"> </el-table-column>
            <el-table-column prop="address" label="位置"> </el-table-column>
            <el-table-column prop="man" label="联系人"> </el-table-column>
            <el-table-column prop="mobile" label="联系电话"> </el-table-column>
            <el-table-column prop="starttime" label="开始时间"> </el-table-column>
            <el-table-column prop="endtime" label="结束时间"> </el-table-column>
            <el-table-column prop="signCompanyCou" label="公司预约"> </el-table-column>
            <el-table-column prop="signCou" label="总预约数"> </el-table-column>
            <el-table-column prop="msg" label="班车详情" width="100">
                <template #default="props">
                    <span class="pointer mr10 base-color" @click="editData(props.row,3)">查看详情</span>
                </template>
            </el-table-column>
            <el-table-column prop="msg" label="预约情况" width="100">
                <template #default="props">
                    <span class="pointer mr10 base-color" @click="editData(props.row,4)">查看预约</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span v-if="isEdit==3">订水订餐详情</span>
            <span v-if="isEdit==4" class="mr20">{{form.title}}预约情况</span>
            <el-form v-if="isEdit==4" :inline="true" :model="sign_sifterForm" class="demo-form-inline">
                <el-form-item label="筛选：">
                    <el-date-picker v-model="sign_sifterForm.day" type="dater" value-format="YYYY-MM-DD"  align="right" @change="sign_updalist(sign_sifterForm)" @clear="sign_updalist(sign_sifterForm)"></el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="form-box">
            <div v-if="isEdit==3" class="">
                <span class="head-title mb10">{{form.title||''}}</span>
                <div class="flex-row-center ju-flex-start mt10 mb5">
                    <span class="base-size mr20"><span class=" base-gray-size">位置：</span>{{form.address||""}}</span>
                    <span class="base-size mr20"><span class=" base-gray-size">开始时间：</span>{{form.starttime||""}}</span>
                    <span class="base-size mr20"><span class=" base-gray-size">结束时间：</span>{{form.endtime||""}}</span>
                    <br/>
                </div>
                <div class="flex-row-center ju-flex-start mt5 mb10">
                    <span class="base-size mr20"><span class=" base-gray-size">联系人：</span>{{form.man||""}}</span>
                    <span class="base-size mr20"><span class=" base-gray-size">联系电话：</span>{{form.mobile||""}}</span>
                </div>
                <div class="line mt10 mb10"></div>
                <div v-html="form.msg"></div>
            </div>
            <div v-if="isEdit==4" class="">
                <el-table :data="sign_list" stripe style="width: 100%">
                    <el-table-column prop="name" label="预约人"> </el-table-column>
                    <el-table-column prop="code" label="预约码"> </el-table-column>
                    <el-table-column prop="mobile" label="联系电话"> </el-table-column>
                    <el-table-column prop="department" label="所属部门"> </el-table-column>
                    <el-table-column prop="intime" label="预约提交时间"> </el-table-column>
                </el-table>
                <div class="pd20 w100 flex-row-center ju-flex-end">
                    <el-pagination
                        v-model:currentPage="sign_sifterForm.currentpage"
                        v-model:page-size="sign_sifterForm.pagesize"
                        :page-sizes="[10, 20, 50, 100]" :total="sign_total"
                        @size-change="()=>{sign_updalist(sign_sifterForm)}"
                        @current-change="()=>{sign_updalist(sign_sifterForm)}"
                        layout="total, sizes, prev, pager, next, jumper"  background/>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'
    import upfileSingle from '../../components/upfile_single.vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            currentpage: 1,
            pagesize: 10
        },

        form: {},

        sign_total: 0,
        sign_list:[],
        sign_sifterForm: {
            "order_id":"",
            "day":"",
            currentpage: 1,
            pagesize: 10
        },
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'life/order/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item,isEditidx)=>{
        console.log(item);
        if(isEditidx==4){
            sign_sifterForm.value.order_id = item.order_id
            sign_sifterForm.value.day = proxy.$utils.dateFormat(new Date(),'yyyy-MM-dd')
            sign_updalist(sign_sifterForm.value)
        }
            form.value = {
                ...item,
            }
            isEdit.value = isEditidx
    }

    const sign_updalist = (form)=>{
        let param = {
            ...form,
        }
        proxy.$ajax({url: 'life/order/sign/list',data:param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                sign_total.value = d.msg.count||0
                sign_list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    
    let { list, sifterForm, isEdit, form, total,sign_sifterForm,sign_total,sign_list } = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>